<template>
  <div>
    <div class="form_box">
      <el-form label-width="80px" :model="userDetail">
        <div class="row"><h2>个人信息设置</h2>
          <div class="col-md-5">
            <el-form-item label="用户名">
              <el-input v-model="userDetail.username"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <el-input v-model="userDetail.avatar"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              {{userDetail.email}}
            </el-form-item>
            <el-form-item label="手机">
              <el-input v-model="userDetail.mobile"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userDetail.password"></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker
                v-model="userDetail.birthday"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="userDetail.gender">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
          <el-button type="primary" @click="updateUserDetail">更新</el-button>
          <el-button @click="toCancel">返回</el-button>
        </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data () {
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^[1][0-9]{10}$/
      if (regMobile.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
    // 个人信息
      userDetail: {},
      // 注册表单验证规则
      userDetailRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请输入性别', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '请输入出生日期', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 获取信息
    async getUser () {
      const { data: res } = await this.$http.get('user/selectById.do?uid=' + localStorage.uid)
      this.userDetail = res.data
    },
    // 编辑更新个人信息
    async updateUserDetail () {
      console.log(this.userDetail)
        const { data: res } = await this.$http.put('user/update.do', this.userDetail)
        console.log(res)
        if (res.flag === true) {
          this.$message.success('更新成功')
          var token = localStorage.getItem('token')
          localStorage.clear()
          localStorage.setItem('token', token)
          localStorage.setItem('uid', this.userDetail.uid)
          localStorage.setItem('avatar', this.userDetail.avatar)
          localStorage.setItem('birthday', this.userDetail.birthday)
          localStorage.setItem('email', this.userDetail.email)
          localStorage.setItem('gender', this.userDetail.gender)
          localStorage.setItem('gmtCreate', this.userDetail.gmtCreate)
          localStorage.setItem('mobile', this.userDetail.mobile)
          localStorage.setItem('password', this.userDetail.password)
          localStorage.setItem('role', this.userDetail.role)
          localStorage.setItem('username', this.userDetail.username)
        } else {
            return this.$message.error('修改失败！')
        }
    },
    // 点击取消，返回首页
    toCancel () {
      this.$router.go(-1)
    }

  },
  created () {
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
.userEdit_box {
  .form_box {
    background: rgb(236, 243, 248);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10%;
    h2 {
      text-align: center;
      color: rgb(228, 236, 154);
      margin-bottom: 5%;
    }
    // border: 1px solid rebeccapurple;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 2% 10%;
    // width: 60%;
    .el-form {
    }
  }
}
.el-avatar {
  border: 1px solid rgb(243, 219, 190);
  background-color: rgb(252, 251, 249);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  position: relative;
  img {
    border-radius: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
